{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商家排行榜 - 电商库存管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        .navbar {
            background-color: #2c3e50;
            overflow: hidden;
            display: flex;
            justify-content: space-around;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            height: 52px; /* 统一高度 */
        }

        .navbar a {
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 16px;
            transition: background-color 0.3s;
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .navbar a:hover {
            background-color: #3498db;
        }

        .navbar a.active {
            background-color: #2980b9;
        }

        .main-content {
            padding: 20px;
            margin-top: 60px;
        }

        .ranking-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        .ranking-title {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #3498db;
        }

        .ranking-table {
            width: 100%;
            border-collapse: collapse;
        }

        .ranking-table th {
            background-color: #3498db;
            color: white;
            padding: 12px;
            text-align: left;
        }

        .ranking-table td {
            padding: 12px;
            border-bottom: 1px solid #ddd;
        }

        .ranking-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .ranking-table tr:hover {
            background-color: #f1f1f1;
        }

        .rank-badge {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            border-radius: 50%;
            color: white;
            font-weight: bold;
        }

        .rank-1 {
            background-color: #ffd700;
        }

        .rank-2 {
            background-color: #c0c0c0;
        }

        .rank-3 {
            background-color: #cd7f32;
        }

        .rank-other {
            background-color: #3498db;
        }

        .chart-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-top: 20px;
        }

        .chart-title {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #3498db;
        }

        .navbar svg {
            fill: white;
            margin-right: 5px;
            position: relative;
            top: 3px;
        }

        .hot-icon {
            position: relative;
            top: 3px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="navbar">
        <a href="{% url 'index' %}">
            <svg t="1744378877217" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2905" width="20" height="20">
                <path d="M878.482153 464.406184L558.225616 193.502577a71.195266 71.195266 0 0 0-92.353503 0L145.517847 464.406184v64.012216l73.003245-61.764458v306.183622c0 37.332315 30.295858 67.628173 67.628173 67.628174h452.483298c37.332315 0 67.628173-30.295858 67.628174-67.628174V467.142584l72.319145 61.178088v-64.012216zM594.287459 791.699179H429.712541v-150.502004c0-45.346058 36.941401-82.287459 82.287459-82.287459s82.287459 36.941401 82.287459 82.287459v150.502004z m163.011262-18.763886c0 10.359229-8.404657 18.763886-18.763886 18.763886h-95.383088v-150.502004c0-72.319145-58.832602-131.151747-131.151747-131.151746s-131.151747 58.832602-131.151747 131.151746v150.502004h-94.698988a18.763886 18.763886 0 0 1-18.763886-18.763886V425.412483L497.438442 230.834892c8.404657-7.134186 20.718458-7.134186 29.220844 0l230.639435 195.163963V773.033022z" p-id="2906"></path>
            </svg>
            首页
        </a>
        <a href="{% url 'user' %}">
            <svg t="1744381512123" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3903" width="20" height="20">
                <path d="M512 447.223c-88.224 0-160-71.776-160-160s71.776-160 160-160c88.225 0 160 71.776 160 160s-71.775 160-160 160z m0-256c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zM454.901 870.594c-96.594 0-184.933-3.802-231.263-49.955C203.308 800.386 193 774.164 193 742.701c0-31.629 10.247-62.812 30.457-92.686 17.978-26.573 42.908-50.741 74.098-71.833C359.256 536.46 437.418 512.53 512 512.53c74.55 0 152.55 23.943 214.002 65.691 31.05 21.094 55.861 45.273 73.746 71.867C819.822 679.937 830 711.096 830 742.701c0 31.552-10.317 57.827-30.664 78.097-50.714 50.521-151.822 50.128-258.88 49.723a7395.45 7395.45 0 0 0-56.914-0.001c-9.605 0.037-19.163 0.074-28.641 0.074zM512 806.447c9.567 0 19.149 0.037 28.701 0.073 49.52 0.191 96.284 0.37 135.808-4.396 38.418-4.633 64.546-13.604 77.659-26.668 5.079-5.06 11.832-13.96 11.832-32.755 0-38.089-27.688-78.744-75.963-111.54C638.933 596.442 574.04 576.53 512 576.53c-126.309 0-255 83.862-255 166.171 0 18.675 6.738 27.547 11.807 32.596 32.045 31.922 128.975 31.55 214.491 31.224 9.556-0.037 19.139-0.074 28.702-0.074z" fill="" p-id="3904"></path>
            </svg>
            用户信息
        </a>
        <a href="{% url 'shop' %}" class="active">
            <svg t="1744383464603" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6572" width="20" height="20"><path d="M924 467.1H768.2c-10.8 0-19.5 8.7-19.5 19.5s8.7 19.5 19.5 19.5h136.3v331.1H690.3V175c0-21.5-17.4-38.9-38.9-38.9H378.7c-21.5 0-38.9 17.4-38.9 38.9v662.1H125.6V408.7h136.3c10.8 0 19.5-8.7 19.5-19.5s-8.7-19.5-19.5-19.5H106.1c-10.8 0-19.5 8.7-19.5 19.5v467.4c0 10.8 8.7 19.5 19.5 19.5H924c10.8 0 19.5-8.7 19.5-19.5v-370c0-10.8-8.8-19.5-19.5-19.5z m-272.6 370H378.7V213.9c0-21.5 17.4-38.9 38.9-38.9h194.7c21.5 0 38.9 17.4 38.9 38.9v623.2zM456.6 311.3v19.5H515v97.4h39V252.9h-39l-58.4 58.4z" p-id="6573"></path></svg>
            排行榜
        </a>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
        <!-- 商家排行榜 -->
        <div class="ranking-container">
            <div class="ranking-title">热门商家排行榜</div>
            <table class="ranking-table">
                <thead>
                    <tr>
                        <th>排名</th>
                        <th>商家名称</th>
                        <th>入库数量</th>
                        <th>出库数量</th>
                        <th>商品盈利值</th>
                        <th>热度指数</th>
                    </tr>
                </thead>
                <tbody>
                    {% for shop in shop_data %}
                    <tr>
                        <td>
                            {% if forloop.counter == 1 %}
                                <span class="rank-badge rank-1">1</span>
                            {% elif forloop.counter == 2 %}
                                <span class="rank-badge rank-2">2</span>
                            {% elif forloop.counter == 3 %}
                                <span class="rank-badge rank-3">3</span>
                            {% else %}
                                <span class="rank-badge rank-other">{{ forloop.counter }}</span>
                            {% endif %}
                        </td>
                        <td>{{ shop.name }}</td>
                        <td>{{ shop.in_stock }}</td>
                        <td>{{ shop.out_stock }}</td>
                        <td>¥{{ shop.profit|floatformat:2 }}</td>
                        <td>
                            {{ shop.hot_index }}
                            <svg class="hot-icon" t="1744440680863" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2392" width="20" height="20">
                                <path d="M360.725 33c3.526 1.457 7.052 2.909 10.575 4.374 24.202 10.07 48.704 19.484 72.535 30.362 36.75 16.774 71.604 37.031 104.774 60.142 26.75 18.64 51.616 39.576 75.127 62.087 8.946 8.564 17.269 17.852 25.224 27.354 11.313 13.515 22.512 27.179 32.88 41.417 16.44 22.572 30.486 46.615 41.868 72.193 9.157 20.583 17.27 41.491 22.289 63.505 1.506 6.607 2.988 13.217 4.803 21.235 22.57-30.853 27.756-66.112 34.339-102.473 12.856 20.155 25.33 38.876 36.948 58.113 19.011 31.48 37.17 63.487 51.968 97.194 10.17 23.167 20.189 46.494 28.429 70.384 7.825 22.688 14.158 45.995 19.464 69.411 4.837 21.353 8.16 43.128 8.012 65.212-0.008 1.095 0.677 2.192 1.04 3.287v28.275c-0.367 5.083-0.316 10.237-1.177 15.235-3.069 17.82-5.747 35.75-9.874 53.332-6.161 26.25-17.03 50.81-31.715 73.345-9.397 14.419-20.491 27.767-31.257 41.251-12.39 15.518-27.201 28.644-43.358 40.07-14.476 10.239-29.266 20.104-44.455 29.242-21.161 12.732-43.663 22.72-68 30.057 0.362-1.721 0.494-3.108 0.943-4.385 0.256-0.727-0.038-1.391-0.884-1.995 3.78-2.514 7.52-5.092 11.223-7.714 9.023-6.387 17.294-13.725 24.214-22.4 6.013-7.538 12.209-15.001 17.456-23.061 8.202-12.599 14.272-26.329 17.712-41.003 2.305-9.83 3.801-19.853 5.514-29.815 0.482-2.794 0.453-5.675 0.658-8.517v-15.806c-0.203-0.613-0.585-1.226-0.58-1.838 0.082-12.346-1.774-24.519-4.475-36.456-2.963-13.09-6.5-26.12-10.87-38.804-4.602-13.355-10.197-26.396-15.877-39.347-8.265-18.843-18.406-36.737-29.023-54.335-6.488-10.754-13.455-21.22-20.634-32.488-3.677 20.327-6.573 40.039-19.178 57.287-1.013-4.483-1.841-8.178-2.682-11.872-2.804-12.306-7.334-23.994-12.448-35.501-6.357-14.3-14.2-27.74-23.381-40.359-5.791-7.96-12.046-15.598-18.364-23.153-4.442-5.313-9.09-10.505-14.086-15.293-13.13-12.584-27.017-24.288-41.957-34.708-18.524-12.92-37.99-24.245-58.513-33.622-13.31-6.081-26.993-11.345-40.51-16.974-1.966-0.819-3.936-1.63-5.905-2.445h-1.823c2.422 5.634 5.001 11.206 7.237 16.915 5.352 13.666 9.691 27.673 12.132 42.149 1.853 10.98 3.211 22.066 4.24 33.156 0.716 7.715 1.045 15.546 0.599 23.27-1.31 22.64-5.744 44.64-14.715 65.61-7.112 16.63-16.064 32.158-27.791 45.931-7.035 8.261-14.661 16.02-22.068 23.96-0.871 0.934-2.038 1.592-3.418 2.645-9.25-20.868-19.72-40.931-33.244-60.231-0.746 3.928-1.463 7.05-1.916 10.21-1.707 11.923-5.19 23.362-9.133 34.7-5.79 16.647-13.894 32.063-24.987 45.738-4.47 5.51-10.332 9.877-14.917 15.309-3.614 4.28-6.848 9.116-9.181 14.197-4.825 10.504-7.04 21.814-8.917 33.158l-0.338 2.063c-0.528 3.25-0.448 6.599-0.698 9.898-0.033 0.422-0.378 0.821-0.579 1.231v24.319c0.404 2.901 0.709 5.82 1.23 8.7 1.621 8.97 2.588 18.146 5.19 26.827 2.969 9.909 6.878 19.636 11.374 28.962 5.008 10.388 11.799 19.73 19.437 28.488 12.581 14.425 27.58 25.594 44.386 34.512a198.767 198.767 0 0 0 6.817 3.451c-9.097 0.587-18.404 1.198-27.916 1.832-0.197-0.284-0.353-0.777-0.596-0.823-11.847-2.27-23.729-4.365-35.549-6.763-33.377-6.77-65.133-18.109-95.23-34.062-30.092-15.952-56.95-35.931-79.477-61.735-13.677-15.665-25.836-32.376-34.804-50.96-8.05-16.682-15.05-34.08-20.366-51.805-4.659-15.53-6.391-31.942-9.295-47.987-0.932-5.152-1.478-10.374-2.201-15.564v-43.5c0.36-0.734 0.978-1.448 1.036-2.204 0.449-5.901 0.305-11.89 1.25-17.705 3.502-21.524 7.41-43.074 16.572-63.002 4.178-9.089 9.969-17.74 16.44-25.396 8.21-9.716 18.708-17.527 26.71-27.384 19.863-24.463 34.374-52.038 44.742-81.817 7.06-20.28 13.297-40.742 16.354-62.07 0.81-5.652 2.095-11.237 3.43-18.264 24.216 34.524 42.964 70.413 59.527 107.742 2.47-1.884 4.56-3.06 6.12-4.732 13.263-14.204 26.918-28.082 39.515-42.86 20.998-24.637 37.028-52.413 49.763-82.159 16.064-37.512 24.004-76.865 26.348-117.362 0.8-13.818 0.21-27.827-1.07-41.626-1.844-19.838-4.276-39.669-7.593-59.31-4.371-25.893-12.142-50.95-21.725-75.394-4.003-10.213-8.62-20.18-12.959-30.258h3.265z" fill="#E50404" p-id="2393"></path>
                            </svg>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 热度趋势图 -->
        <div class="chart-container">
            <div class="chart-title">热门商家热度趋势</div>
            <canvas id="hotShopsChart" height="400"></canvas>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化热度趋势图
            const ctx = document.getElementById('hotShopsChart').getContext('2d');
            const hotShopsChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: {{ shop_names|safe }},
                    datasets: [{
                        label: '热度指数',
                        data: {{ hot_indices|safe }},
                        backgroundColor: [
                            'rgba(255, 215, 0, 0.7)',
                            'rgba(192, 192, 192, 0.7)',
                            'rgba(205, 127, 50, 0.7)',
                            'rgba(52, 152, 219, 0.7)',
                            'rgba(46, 204, 113, 0.7)'
                        ],
                        borderColor: [
                            'rgba(255, 215, 0, 1)',
                            'rgba(192, 192, 192, 1)',
                            'rgba(205, 127, 50, 1)',
                            'rgba(52, 152, 219, 1)',
                            'rgba(46, 204, 113, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `热度指数: ${context.raw}`;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: '热度指数'
                            }
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>